<template>
  <view class="stopwatch-container">
    <view class="header">
      <text class="title">秒表</text>
    </view>

    <!-- 主要时间显示 -->
    <view class="main-display">
      <view class="time-display">{{ formatTime(currentTime) }}</view>
      <view class="milliseconds">.{{ String(Math.floor(currentTime % 1000 / 10)).padStart(2, '0') }}</view>
    </view>

    <!-- 控制按钮 -->
    <view class="control-buttons">
      <view v-if="!isRunning && !isPaused" class="btn start-btn" @click="start">
        <text class="btn-text">开始</text>
      </view>
      
      <template v-else>
        <view class="btn-group">
          <view class="btn lap-btn" @click="addLap" v-if="isRunning">
            <text class="btn-text">计次</text>
          </view>
          <view class="btn reset-btn" @click="reset" v-if="isPaused">
            <text class="btn-text">重置</text>
          </view>
          
          <view class="btn pause-btn" @click="pause" v-if="isRunning">
            <text class="btn-text">暂停</text>
          </view>
          <view class="btn resume-btn" @click="resume" v-if="isPaused">
            <text class="btn-text">继续</text>
          </view>
        </view>
      </template>
    </view>

    <!-- 计次记录 -->
    <view class="lap-records" v-if="lapTimes.length > 0">
      <view class="lap-header">
        <text class="lap-title">计次记录</text>
      </view>
      <scroll-view class="lap-list" scroll-y>
        <view v-for="(lap, index) in lapTimes" :key="index" class="lap-item">
          <view class="lap-number">计次 {{ lapTimes.length - index }}</view>
          <view class="lap-time">{{ formatTime(lap.time) }}.{{ String(Math.floor(lap.time % 1000 / 10)).padStart(2, '0') }}</view>
          <view class="lap-diff" v-if="index < lapTimes.length - 1">
            +{{ formatTime(lap.time - lapTimes[index + 1].time) }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      isRunning: false,
      isPaused: false,
      startTime: 0,
      pausedTime: 0,
      timer: null,
      lapTimes: []
    }
  },
  
  methods: {
    start() {
      this.isRunning = true
      this.isPaused = false
      this.startTime = Date.now() - this.pausedTime
      
      this.timer = setInterval(() => {
        this.currentTime = Date.now() - this.startTime
      }, 10)
    },
    
    pause() {
      this.isRunning = false
      this.isPaused = true
      this.pausedTime = this.currentTime
      
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    
    resume() {
      this.start()
    },
    
    reset() {
      this.isRunning = false
      this.isPaused = false
      this.currentTime = 0
      this.startTime = 0
      this.pausedTime = 0
      this.lapTimes = []
      
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    
    addLap() {
      this.lapTimes.unshift({
        time: this.currentTime,
        timestamp: Date.now()
      })
    },
    
    formatTime(milliseconds) {
      const totalSeconds = Math.floor(milliseconds / 1000)
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
    }
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.stopwatch-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
}

.main-display {
  text-align: center;
  margin-bottom: 100rpx;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.time-display {
  font-size: 100rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
  font-family: 'Courier New', monospace;
}

.milliseconds {
  font-size: 60rpx;
  color: #ffffff;
  opacity: 0.8;
  margin-left: 10rpx;
  font-family: 'Courier New', monospace;
}

.control-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 60rpx;
}

.btn-group {
  display: flex;
  gap: 40rpx;
}

.btn {
  padding: 30rpx 60rpx;
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  min-width: 140rpx;
  text-align: center;
}

.start-btn, .resume-btn {
  background: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
}

.pause-btn {
  background: rgba(255, 193, 7, 0.3);
  border-color: rgba(255, 193, 7, 0.5);
}

.reset-btn {
  background: rgba(244, 67, 54, 0.3);
  border-color: rgba(244, 67, 54, 0.5);
}

.lap-btn {
  background: rgba(33, 150, 243, 0.3);
  border-color: rgba(33, 150, 243, 0.5);
}

.btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.lap-records {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.lap-header {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.lap-title {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
}

.lap-list {
  max-height: 400rpx;
}

.lap-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
}

.lap-item:last-child {
  border-bottom: none;
}

.lap-number {
  flex: 1;
  font-size: 28rpx;
  color: #ffffff;
  opacity: 0.8;
}

.lap-time {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  margin-right: 20rpx;
}

.lap-diff {
  font-size: 24rpx;
  color: #4CAF50;
  opacity: 0.8;
}
</style>